<template>
  <div>
    <van-row v-for="item in shopcar" :key="item._id">
      <van-col span="4">
        <van-checkbox v-model="item.status" @click="checkItem"></van-checkbox>
      </van-col>
      <van-col span="20">
        <van-card
          :price="item.price"
          :title="item.title"
          :thumb="item.pic"
          :num="item.num"
        >
          <template #footer>
            <van-stepper v-model="item.num"
          /></template> </van-card
      ></van-col>
    </van-row>

    <van-submit-bar
      :price="$store.getters.allPrice * 100"
      button-text="选中删除"
      @submit="clear"
    >
      <!-- @submit这里必须是submit 不能是别的 -->
      <van-checkbox v-model="$store.state.checked" @click="checkall"
        >全选</van-checkbox
      >
    </van-submit-bar>
  </div>
</template>

<script>
import { ref, reactive, toRefs, computed } from "vue";
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";
export default {
  setup(props, ctx) {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const data = reactive({});
    const shopcar = computed(() => store.state.shopcar);
    //用计算属性拿到我们的vuex里的购物车数据

    const checkItem = () => store.commit("checkItem");
    //当只有一行代码的时候箭头函数也能省略大括号

    const checkall = () => store.commit("checkall");
    //调用vuex中的点击全选按钮的事件

    const clear = () => store.commit("clear");
    //调用vuex中的clear方法
    return { ...toRefs(data), shopcar, checkItem, checkall, clear };
  },
};
</script>

<style lang="scss"></style>
